<template>
  <el-container class="list-container">
    <el-header class="navbar">
      <div class="navbar-inner">
        <div class="left">
          <el-page-header title=" ">
			  <template #icon>
			  	<el-icon @click="back"><ArrowLeftBold/></el-icon>
			  </template>
            <template #content>
              <span class="text">历史反馈信息列表</span>
            </template>
          </el-page-header>
        </div>
      </div>
    </el-header>
    <el-main>
      <el-card class="main">
        <el-table :data="historyData" style="width: 100%" :show-header="false" @row-click="handleRowClick">
          <el-table-column prop="level" width="60" >
            <template #default="{ row }">
              <div class="level" :style="{ backgroundColor: levelColor(row.level) }">
                {{ getLevelText(row.level) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="date" width="110" />
          <el-table-column prop="time" width="80" />
          <el-table-column prop="province.name" width="70" />
          <el-table-column prop="city.name" width="70" />
        </el-table>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { ArrowLeftBold } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
let router = useRouter()
let back = function(){
	router.push({path:"/selectGrid"})
}
function parseJWT(token) {
  // 分割JWT的三个部分
  let parts = token.split('.');
  let base64Url = parts[1];
  let rawData = atob(base64Url.replace(/-/g, '+').replace(/_/g, '/')); // 替换URL安全的字符
  let decoder = new TextDecoder('utf-8');
  let payload = JSON.parse(decoder.decode(new Uint8Array(rawData.split('').map(c => c.charCodeAt(0)))));
  return payload;
}
let token = sessionStorage.getItem("token")
let user = reactive({})
user=parseJWT(token)
console.log(user)
let historyData = reactive([])
let getHistoryData = function(){
	axios.get("http://localhost:7000/service-neps/supervisor/findHistory",{
			params : {number : user.phoneNumber}
		}).then(res=>{
		historyData.splice(0,historyData.length,...res.data)
		console.log(historyData)
	})
}
let handleRowClick = function(row){
  router.push({
    path:'/listInformation',
    query:{id: row.id}
  })
}
let levelColor = (level)=>{
	let color; 
	switch (level) { 
		case 1: color = '#1be21f'; break; 
		case 2: color = '#dddd23'; break; 
		case 3: color = '#fc8016'; break; 
		case 4: color = '#f5150d'; break; 
		case 5: color = '#970c4d'; break; 
		case 6: color = '#5e041a'; break; 
		default: color = 'black'; 
	} 
	return color ;
}
const levelTexts = ['一', '二', '三', '四', '五', '六'];
const getLevelText = (level) => {
  return levelTexts[level - 1];
};
onMounted(()=>{
	getHistoryData()
})
</script>

<style scoped>
.list-container {
  display: flex;
  height: 100%;
  background: url('@/assets/kongjing2.jpg') no-repeat center center;
  background-size: cover;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #96afc5, #96afc3);
  color: white;
  padding: 10px;
  width: 100%;
}

.navbar-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.main {
  display: flex;
  flex-direction: column; /* 设置为列方向 */
  align-items: center; /* 垂直居中 */
  width: 100%; /* 确保卡片宽度 */

}

.level {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  font-weight: bold;
}

.level-container {
  flex: 0 0 auto;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  text-align: center;
}
</style>
